import React, { Component } from "react";
import "./icon.css";
import "./App.scss";

class App extends Component {
  state = {
    allcheck:true,//全选
    selected_num: 1, //已选数量
    totalPrice: 0, //总价
    products: [
      {
        id: 1,
        products_title: "复古造型 6档烘烤多士炉/吐司机",
        products_img:
          "https://yanxuan-item.nosdn.127.net/1fa2583d110d89dadbbe7dbab3ee0d68.png?type=webp&imageView&thumbnail=160x0&quality=75",
        products_Tag: "焕新盛典",
        price: 139,
        discount_price: 169,
        checked: true,
        num: 1,
      },
      {
        id: 2,
        products_title: "可登机铝框拉杆箱（17/20）",
        products_img:
          "https://yanxuan-item.nosdn.127.net/b100777e9d513f800dd3fa568cb397ff.png?type=webp&imageView&thumbnail=160x0&quality=75",
        products_Tag: "特价",
        price: 279,
        discount_price: 369,
        checked: true,
        num: 1,
      },
      {
        id: 3,
        products_title: "在家体验泰式皇家按摩，3D柔感智能按摩椅",
        products_img:
          "https://yanxuan-item.nosdn.127.net/8a8c2d7aba8b16fedaeb790b89ce0896.jpg?type=webp&imageView&thumbnail=160x0&quality=75",
        price: 8999,
        discount_price: 9100,
        checked: true,
        num: 1,
      },
     
    ],
  };
  //实现加按钮
  handleAdd = (index) => {
    let data = this.state.products;
    ++data[index].num;
    if (data[index].num > 55) {
      return alert("库存不足"), (data[index].num = 55);
    }
    this.setState({
      products: data,
    });
  };
  //实现减按钮
  handleSub = (index) => {
    let data = this.state.products;
    --data[index].num;
    if (data[index].num < 1) {
      return alert("本商品1件起售"), (data[index].num = 1);
    }
    this.setState({
      products: data,
    });
  };
  //获取总价
  getTotalPrice = () => {
    let total = 0;
    this.state.products.map((v) => {
      if (v.checked) {
        total += v.price * v.num;
      }
    });
    return total;
  };
  //获取全选数量
  getSelected = () => {
    let num = 0;
    this.state.products.map((v) => {
      if (v.checked) {
        num += v.num;
      }
    });
    return num;
  };
  //取消选中
  handleCheck = (e) => {
    let allcheck =true
    let  index  = e.currentTarget.dataset.index
    let products = this.state.products;
    //取反
    products[index].checked = !products[index].checked;
    products.map(v=>{
      if(!v.checked){
        allcheck = false
      }
    })
    this.setState({
      products : products,
      allcheck
    })
  };
  //全选
  allhandleCheck =(params) => {
      console.log("执行了全选")
      let allcheck = !this.state.allcheck;
      let products = this.state.products
      products.forEach((v)=>{
        v.checked = allcheck
       return this.setState({
         products:products,
          allcheck
        })
      })
  };
  //下单
  handlePayClick = (params) => {
    return this.state.products.some(v=>{
      return v.checked
    })
  }
  render() {
    return (
      <div className="cart">
        {/* 购物小车列表的开始 */}
        <div className="cart-list">
          {this.state.products.map((v, index) => {
            return (
              <div className="cart-list-item" key={v.id}>
                <div className="cart-item-left">
                  <i className={"iconfont " +(v.checked?"icon-xuanzhong-2":"icon-danxuanxuanzhong")}
                  data-index={index}
                  onClick={this.handleCheck}></i>
                </div>
                <div className="cart-item-mid">
                  <img src={v.products_img} alt="" />
                </div>
                <div className="cart-item-right">
                  <div className="item-right-top">
                    <span>{v.products_Tag}</span>

                    {v.products_title}
                  </div>
                  <div className="item-right-bottom">
                    <div className="right-bottom-l">
                      <span className="price">￥{v.price}</span>
                      <span className="discount-price">
                        ￥{v.discount_price}
                      </span>
                    </div>
                    <div className="right-bottom-r">
                      <button
                        className="sub"
                        onClick={this.handleSub.bind(this, index)}
                      >
                        -
                      </button>
                      <span className="num">{v.num}</span>
                      <button
                        className="add"
                        onClick={this.handleAdd.bind(this, index)}
                      >
                        +
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {/* 购物小车列表的结束 */}
        {/* 底部功能区开始 */}
        <div className="cart-func">
          <div className="cart-func-left">
            <i className={"iconfont "+(this.state.allcheck?"icon-xuanzhong-2":"icon-danxuanxuanzhong")}
            onClick={this.allhandleCheck}></i>
            <span className="title">已选({this.getSelected()})</span>
          </div>
          <div className="cart-func-right">
            <div className="cart-funv-right-l">
              <div className="cart-total">合计:￥{this.getTotalPrice()}</div>
              <div className="cart-promotion-Price">已优惠:￥120</div>
            </div>
            <div className={this.handlePayClick()?"cart-funv-right-r":"cart-funv-right-disable"}>下单</div>
          </div>
        </div>
        {/* 底部功能区结束 */}
      </div>
    );
  }
}

export default App;
